<template>
  <div class="gl-fw">
    <div class="select-box">
      <iview-select class="select-wrapper" size='large' placeholder='收益类型' v-model="syType" @on-change="changType">
        <iview-op value='1'>全部</iview-op>
        <iview-op value='3'>服务</iview-op>
        <iview-op value='2'>活动卡</iview-op>
      </iview-select>
      <iview-select class="select-wrapper" size='large' placeholder='时间' v-model="dateTime" @on-change="changDate">
        <iview-op value='1'>全部</iview-op>
        <iview-op value='2'>本月</iview-op>
        <iview-op value='3'>本周</iview-op>
        <iview-op value='4'>今天</iview-op>
      </iview-select>
    </div>
    <div class="shouyi-table">
      <div class="shouyi-title">
        <div class="item">合计</div>
        <div class="item">未结 {{list.zwjs}}</div>
        <div class="item">已结 {{list.zyjs}}</div>
        <!--<div class="item">收益 200</div>-->
      </div>
      <div class="shouyi-item" v-for="(item,index) in list.card" :key="item.bk_id" v-if="showCard">
        <div class="item">{{item.card_name}}</div>
        <div class="item">未结 {{item.wjs}}</div>
        <div class="item">已结 {{item.yjs}}</div>
        <!--<div class="item">收益 200</div>-->
      </div>
      <div class="shouyi-item" v-for="(item,index) in list.shangpin" :key="item.fw_cid" v-if="showFw">
        <div class="item">{{item.fw_mingzi}}</div>
        <div class="item">未结 {{item.wjs}}</div>
        <div class="item">已结 {{item.yjs}}</div>
        <!--<div class="item">收益 200</div>-->
      </div>
    </div>


  </div>
</template>

<script>
  import betterScroll from '@/components/betterScroll';

  import bigTitle from "@/components/bigTitle/index";
  import checkLogin from '@/mixins/checkLogin.js';
  import {
    ViewBox,
    XButton,
    Group,
    Cell
  } from "vux";
  import {
    Popup
  } from "vue-ydui/dist/lib.px/popup";
  export default {
    data() {
      return {
        syType:1,
        dateTime:1,
        start_time: this.$moment('2018-01-01').unix(),
        end_time: this.$moment().unix(),
        list:[],
        showFw:true,
        showCard:true
      };
    },
    created() {
      this.get_data();
    },
    methods: {
      get_data(){
        this.$axios.get('Api/Bb/Shop',{
          params:{
            shop_id:this.userinfo.shop[0].id,
            end_time:this.end_time,
            start_time:this.start_time,
            tj:this.syType
          }
        }).then(
          ({data})=>{
            console.log("报表：",data);
            this.list = data;
          }
        )
      },
      changType(val){
        console.log(val);
        this.syType = val;
        this.get_data();
        if(val==2){
          this.showFw = false;
          this.showCard = true;
        }else if(val==3){
          this.showFw = true;
          this.showCard = false;
        }else{
          this.showFw = true;
          this.showCard = true;
        }
      },
      changDate(val){
        if(val==1){
          this.start_time = this.$moment('2018-01-01').unix();
        }else if(val==2){
          this.start_time = this.$moment().startOf('month').unix();
        }else if(val==3){
          this.start_time = this.$moment().startOf('week').unix();
        }else{
          this.start_time = this.$moment().startOf('day').unix();
        }
        console.log(this.start_time);
        this.end_time = this.$moment().unix();
        this.get_data();
      }
    },
    computed: {

    },
    mixins: [checkLogin],
    components: {
      ViewBox,
      bigTitle,
      XButton,
      Popup,
      Group,
      Cell
    }
  };

</script>

<style lang='scss'>
  .gl-fw {
    height: 100%;
    display: flex;
    flex-direction: column;
    .select-box{
      margin-top: 0.2rem;
      width: 100%;
      background: #fff;
      /*display: flex;*/
      height:1.1rem;
      flex-direction: row;
      border-bottom:1px solid #969896;
      position:fixed;
      top:0;
      left: 0;
      /*padding-bottom:0.2rem;*/
      .select-wrapper{
        width:3rem;
        margin-left: 1.2rem;
      }
    }
    .shouyi-table{
      .shouyi-title{
        display: flex;
        flex-direction: row;
        height:1rem;
        line-height: 1rem;
        background: #50aaff;
        margin-top: 1.5rem;
        .item{
          width: 33%;
          box-sizing: border-box;
          padding-left:0.5rem;
        }
      }
      .shouyi-item{
        height:1rem;
        line-height: 1rem;
        display: flex;
        flex-direction: row;
        border-bottom:1px solid #969896;
        .item{
          width: 33%;
          box-sizing: border-box;
          padding-left:0.5rem;
          overflow: hidden;
        }
      }
    }
  }

</style>
